<template>
  <!-- 创建时间：2023/4/16 -->
  <!-- 作者：LeiSir16 -->
  <!-- ExploreListPage组件说明：发现页列表 -->
    <div class="explore-list">
        <div v-loading="isLoading">
            <el-row v-for="rows in curShowMusicList" :key="rows.id" style="margin-bottom: 1vh">
                <el-col :span="4" v-for="(columns,index) in rows.data" :key="columns.id" :offset="index === 0 ? 0 : 1">
                    <list-item :item-description="columns"/>
                </el-col>
            </el-row>
            <!--是否加载更多按钮-->
            <el-row v-show="level !== 1 && level !== 3 && isMore && !isLoading">
                <el-col :span="24" class="load-more">
                    <span @click="loadMoreList">加载更多</span>
                </el-col>
            </el-row>
        </div>
        <BackToHead/>
    </div>
</template>

<script>
import {getHighqualitySongList, getRecPlayList, getSpecialSongList, getTopList} from "@/http";
import {LINKTOALL, RECSONGLIST, TOPLIST} from "@/http/constant";
import {formatArray} from "@/http/tools";
import ListItem from "@/minicomponents/ListItem.vue";
import BackToHead from "@/minicomponents/BackToHead.vue";

export default {
    name: "ExploreListPage",
    components: {BackToHead, ListItem},
    props: ['defaultLevel', 'defaultName'],
    data() {
        return {
            musicList: [],
            curShowMusicList: [],
            // 精品歌单上一次最后一个歌单的更新时间
            before: 0,
            isMore: true,
            column: 5,
            offset: 0,
            // 排序类型new/hot
            order: 'hot',
            limit: 30,
            level: 0,
            name: '全部歌单',
            isLoading: true
        }
    },
    methods: {
        // 初始化数据
        init() {
            this.musicList = []
            this.curShowMusicList = []
            this.isMore = true
            this.before = 0
            this.offset = 0
            this.order = 'hot'
            this.limit = 30
            this.isLoading = true
        },
        // 请求数据
        requestData(loadMore = false) {
            this.isLoading = true
            const {offset, order, limit, level, name, before} = this
            if (Number(level) === 1) {
                // 加载推荐歌单数据(最多100条)
                getRecPlayList(100).then(res => {
                    const {code, result} = res
                    if (code === 200) {
                        this.musicList = result
                    }
                }, err => {
                    console.log(`发现页推荐歌单获取失败${err}`)
                })
            } else if (Number(level) === 2) {
                // 获取精品歌单数据
                getHighqualitySongList('全部', before, limit).then(res => {
                    const {playlists, more, lasttime} = res
                    if (loadMore) {
                        this.musicList = [...this.musicList, ...playlists]
                    } else {
                        this.musicList = playlists
                    }
                    this.before = lasttime
                    this.isMore = more
                }, err => {
                    console.log(`精品歌单获取失败${err}`)
                })
            } else if (Number(level) === 3) {
                // 获取所有排行榜信息
                getTopList().then(res => {
                    const {code, list} = res
                    if (code === 200) {
                        this.musicList = list
                    }
                }, err => {
                    console.log(`发现页排行榜获取失败${err}`)
                })
            } else {
                getSpecialSongList(name, offset, order, limit).then(res => {
                    const {more, playlists} = res
                    if (loadMore) {
                        this.musicList = [...this.musicList, ...playlists]
                    } else {
                        this.musicList = playlists
                    }
                    this.isMore = more
                    this.offset += limit
                }, err => {
                    console.log(`指定歌单加载失败${err}`)
                })
            }
        },
        // 加载更多的歌单点击事件
        loadMoreList() {
            this.requestData(true)
        }
    },
    mounted() {
        this.$bus.$on(LINKTOALL, (d) => {
            const {level, name} = d
            this.level = level
            this.name = name
            this.init()
            this.requestData()
        })
    },
    watch: {
        musicList: {
            deep: true,
            handler(newVal) {
                if (newVal.length) {
                    const newList = newVal.map(item => {
                        let picUrl = ''
                        if (this.level === 1) {
                            picUrl = item.picUrl
                        } else {
                            picUrl = item.coverImgUrl
                        }
                        if (this.level === 3) {
                            return {
                                id: item.id,
                                title: item.name,
                                picUrl,
                                hasPlayCount: true,
                                isCircle: false,
                                hasAuthor: true,
                                titleIsLeft: true,
                                author: item.updateFrequency,
                                description: item.description,
                                playCount: item.playCount,
                                itemType: TOPLIST,
                                hasPlayIcon: true
                            }
                        } else {
                            // 除了排行榜其他的歌单格式化方式
                            return {
                                id: item.id,
                                title: item.name,
                                picUrl,
                                playCount: item.playCount,
                                // 是否是圆形图片
                                isCircle: false,
                                // 是否有歌手名称
                                hasAuthor: false,
                                // 标题是否靠左
                                titleIsLeft: true,
                                // 是否有播放数量
                                hasPlayCount: true,
                                // 列表项类型
                                itemType: RECSONGLIST,
                                hasPlayIcon: true
                            }
                        }
                    })
                    const formatArr = formatArray(Math.ceil(newList.length / this.column), this.column, newList)
                    this.curShowMusicList = formatArr
                    this.isLoading = false
                }
            }
        },
        defaultLevel: {
            immediate: true,
            handler(newVal) {
                this.level = newVal
                this.name = this.defaultName
                this.init()
                this.requestData()
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.explore-list {
  .load-more {
    text-align: center;
    font-size: .85vw;
    font-weight: 700;
    margin: .8vw 0;

    > span {
      display: inline-block;
      width: 5vw;
      height: 1.8vw;
      line-height: 1.8vw;
      opacity: .7;
      background-color: @mouseHover;
      border-radius: .5vw;
      cursor: pointer;
      transition: all .2s ease;

      &:hover {
        background-color: @bgColor;
        color: @mainColor;
      }
    }
  }
}
</style>